<template>
  <div>
    <div v-for="(item, index) in obj" :key="index" v-if="item.son && item.son.length > 0">
      <p class="type_name">{{item.typename}}</p>
      <van-row>
        <van-col span="6" class="flex-col margin-b-40" v-for="(son, j) in item.son" :key="j"
        @click="toForm(item.tid, son.tplid)" >
          <template v-if="son.img">
            <img width="35" height="35" :src="`${$common.filePath}${son.img}`" />
          </template>
          <template v-else>
            <img width="35" height="35" src="../../assets/approval/1.png" />
          </template>
          <span class="desc-class ">{{son.title}}</span>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        obj: {
          typename: '',
          son: {}
        },
      }
    },
    activated() {
      this.$bridge.callHandler('navTitle', {title: '新建流程'})
      this.getData()
    },
    methods: {
      /**
       * 获取数据
       * @return {[type]} [description]
       */
      getData() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}workclass.php`,
          data: {
            do: "workaddlist",
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          this.obj = res.data
        }).catch(err => {
          this.$toast(err.msg)
        })
      },
      /**
       * 表单提交页
       */
      toForm(typeid, tplid) {
        /*let config = {
          method: "post",
          url: `${this.$common.basePath}workclass.php`,
          data: {
            do: "workclassadd",
            tplid: tplid,
            typeid: typeid,
            user_id: this.$store.state.userId || 1
          }
        }
        this.$axios(config).then(res => {
          let item = res.data
          this.$router.push({ name:"approvalForm", query:{ workid: item.workid, typeid: item.typeid, tplid: item.tplid} })
        }).catch(err => {
          this.$toast(err.msg)
        })*/
        this.$router.push({ name:"approvalForm", query:{ typeid: typeid, tplid: tplid} })
      },
      getImgsrc (tplid) {
        let imgsrc = ""
        switch (tplid) {
          case '8906':
            imgsrc = require("../../assets/approval/8906.png")
            break;
          case '8907':
            imgsrc = require("../../assets/approval/8907.png")
            break;
          case '8908':
            imgsrc = require("../../assets/approval/8908.png")
            break;
          case '8909':
            imgsrc = require("../../assets/approval/8909.png")
            break;
          case '8910':
            imgsrc = require("../../assets/approval/8910.png")
            break;
          case '8901':
            imgsrc = require("../../assets/approval/8901.png")
            break;
          case '8902':
            imgsrc = require("../../assets/approval/8902.png")
            break;
          case '8903':
            imgsrc = require("../../assets/approval/8903.png")
            break;
          case '8904':
            imgsrc = require("../../assets/approval/8904.png")
            break;
          case '8905':
            imgsrc = require("../../assets/approval/8905.png")
            break;
          case '8911':
            imgsrc = require("../../assets/approval/8911.png")
            break;
          case '8912':
            imgsrc = require("../../assets/approval/8912.png")
            break;
          default:
            imgsrc = require("../../assets/approval/1.png")
        }
        return imgsrc;
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .type_name {
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    margin-top: 13px;
    margin-left: 15px;
    margin-bottom: 20px;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .desc-class {
    color: #333333;
    font-size: 12px;
    margin-top: 12px;
    width: 97%;
    text-align: center;
    height: 28px;
  }
  .margin-b-40 {
    margin-bottom: 40px;
  }
</style>